<template>
  <div class="kp-my">

    <div class="kp-vheader" v-if="$route.meta.xheader" :class="$route.meta.xclass?$route.meta.xclass:''">
      <!-- ########################左部内容################################## -->
      <div class="kp-vheader-left" @click="backgo">
        <div class="kp-vheader-back"></div><!-- //返回 -->
        <div class="left-arrow"></div><!-- //左部角标 -->
      </div>
      <!-- ########################左部内容################################## -->
      <!-- ########################中部内容################################## -->
      <h1 class="kp-vheader-title">
        <template v-if="$route.path!=='/index/hotel/hotelList'&&$route.path!=='/index/hotel/hotelSearch'">
          <template v-if="$route.path!=='/index/scenic'&&$route.path!=='/index/scenic/scenicSearch'">
            <span v-if="$route.meta.xtitle?$route.meta.xtitle:false">{{ctitle}}</span>
          </template>
          <template v-else>
            <input type="text" @click="scenicClick" v-if="$route.path=='/index/scenic'" class="scenic-search"
              readonly="readonly" placeholder="景区名称/目的地">
            <input type="text" v-if="$route.path=='/index/scenic/scenicSearch'" v-model="keyword"
              v-on:input="scenicblur" class="scenic-search2" placeholder="景区名称/目的地">
          </template>
        </template>
        <template v-else>
          <input type="text" v-if="$route.path=='/index/scenic'" class="scenic-search" readonly="readonly"
            placeholder="景区名称/目的地">
          <div class="hotel-title">
            <input type="text" @click="hotelClick" readonly="readonly" v-if="$route.path=='/index/hotel/hotelList'"
              class="hotel-search2" placeholder="请输入关键词">
            <!-- //时间选择定位 -->
            <div class="hotel-t-box" v-if="$route.path=='/index/hotel/hotelList'">
              <em>住02-14</em>
              <em>离04-12</em>
            </div>
            <input type="text" v-model="keyhotel" v-if="$route.path=='/index/hotel/hotelSearch'" class="hotel-search2"
              @input="searhotel" @keyup.enter="searchTap" placeholder="请输入关键词">
          </div>
        </template>

      </h1>
      <!-- ########################中部内容################################## -->
      <!-- ########################右部内容################################## -->
      <div class="kp-vheader-right">
        <a slot="right" v-if="$route.name=='scenicname'" class="kp-right-scenic" @click="cityList">
          <template v-if="scenic_cityinfo">
            {{stringSplice(scenic_cityinfo)}}
          </template>
          <template v-else>
            {{stringSplice(cityinfo.cityName)}}
          </template>
        </a>
        <!--<a slot="right" v-if="$route.path=='/index/hotel/hotelSearch'" class="kp-right-scenic" >石家庄</a>-->
        <a slot="right" v-if="$route.path=='/index/hotel/hotelList'" class="kp-right-scenic">石家庄</a>
        <a slot="right" v-if="$route.path=='/index/aircraft/add_fare'" @click="people_add" class="kp-right-air">确定</a>
        <template v-if="istime">
          <a slot="right" v-if="$route.name=='scenicOrderPay'" @click="closeorder"
            class="kp-right-scenicOrderPay">取消订单</a>
        </template>
        <template v-else>
          <a slot="right" v-if="$route.name=='scenicOrderPay'" @click="againScenic()"
            class="kp-right-scenicOrderPay">重新预订</a>
        </template>
        <a slot="right" v-if="$route.path=='/index/scenic/scenicAddpeo'" @click="choicepeople"
          class="kp-right-addpeo">完成</a>
        <!-- //选择出行人 -->
        <a slot="right" v-if="$route.path=='/index/scenic/scenicAddtrip'" @click="isclick?'':addpeople()"
          class="kp-right-addpeo">完成</a>
        <!-- //添加修改出行人 -->
      </div>
      <!-- ########################右部内容################################## -->
    </div>
  </div>
</template>

<script>
  import {
    mapGetters,
    mapActions
  } from "vuex";
  export default {
    data() {
      return {
        keyword: '',
        keyhotel: '',
        con: '',
        isclick: false,
        istime: true,
        timestring: {}
      }
    },
    mounted() { //载入后执行
      //		console.log(this.keyword)
      this.$root.eventHub.$on('scenickey', (keyword) => {
        this.keyword = keyword;
      });
      this.$root.eventHub.$on('scenicbutton', (isbutton) => {
        console.log(isbutton)
        this.isclick = isbutton;
      })
      this.$root.eventHub.$on('timeClose', (timestring) => {
        if (timestring) {
          this.timestring = timestring;
          this.istime = false;
        } else {
          this.istime = true;
        }
      })
    },
    created() { //创建后
      this.getQuery();
    },
    watch: { //监听放置
      "$route": "getQuery"
    },
    methods: { //方法放置
      againScenic() { //景区再次预订
        // var ordertype = ''
        console.log(this.timestring)
        // if(this.timestring.scenicType ==8){
        // 	ordertype='ZY'
        // }else{
        // 	ordertype='XC'
        // }
        this.$root.eventHub.$emit('againScenic'); //eventHub触发事件
        this.$router.push({
          path: '/index/scenic/scenicContent',
          query: {
            scenicId: this.timestring.orderdetile.ScenicSpotID,
            scenicType: this.timestring.scenicType,
          }
        })
      },
      getQuery() {
        this.keyword = '';
        //		console.log(this)
      },
      closeorder() { //取消订单
        this.$root.eventHub.$emit('closeorder'); //eventHub触发事件
      },
      addpeople() { //添加修改出行人
        console.log(this)
        var a = this.$root.eventHub.$emit('addpeo'); //eventHub触发事件
        console.log(a)
      },
      choicepeople() { //选择出行人
        this.$root.eventHub.$emit('choicepeople'); //eventHub触发事件
      },
      people_add() { //选择出行人
        this.$root.eventHub.$emit('people_add'); //eventHub触发事件
      },
      scenicblur() {
        this.$root.eventHub.$emit('scenicblur', this.keyword); //eventHub触发事件
      },
      searhotel() {
        this.$root.eventHub.$emit('searhotel', this.keyhotel); //eventHub触发事件
      },
      searchTap() {
        this.$root.eventHub.$emit('searchTap'); //eventHub触发事件
      },
      cityList() {
        this.$router.push({
          path: '/index/scenic/cityList'
        })
      },
      scenicClick() {
        this.$router.push({
          path: '/index/scenic/scenicSearch'
        })
      },
      hotelClick() {
        this.$router.push({
          path: '/index/hotel/hotelSearch'
        })
      },
      stringSplice(str) {
        //		 console.log(str)
        if (str && str.length > 3) {
          //			 console.log(str)
          //			 console.log(str.length)
          return str.substring(0, 2) + '...';
        } else {
          return str;
        }

      },
      backgo() {
        this.$router.go(-1);
      }
    },
    components: {},
    computed: mapGetters([
      'ctitle',
      'scenic_cityinfo',
      'cityinfo'
    ]),
    beforeDestroy() {
      this.$root.eventHub.$off('scenickey');
      this.$root.eventHub.$off('scenicbutton');
      this.$root.eventHub.$off('timeClose');



    },
  }

</script>

<style scoped>
  /* /deep/深作用标识 */
  .kp-my /deep/ .kp-vheader {
    height: 86px;
    padding: 0;
    position: fixed;
    width: 750px;
    z-index: 999;
    top: 0;
  }

  .kp-my /deep/ .kp-vheader .kp-vheader-title {
    font-size: 34px;
    height: 86px;
    line-height: 86px;
    margin: 0 200px;
    overflow: hidden;
    text-align: center;
    font-weight: 400;
    color: #fff;
  }

  .kp-my /deep/ .kp-vheader .kp-vheader-left .left-arrow {
    width: 36px;
    height: 36px;
    background: url(../../assets/left-1.png) no-repeat center center;
    background-size: 36px 36px;
    top: 25px;
    left: 20px;
    position: absolute;
  }

  .kp-my /deep/ .kp-vheader .kp-vheader-left {
    left: 0px;
    height: 86px;
    top: 0;
    width: 200px;
    position: absolute;
    display: block;
    font-size: 14px;
    line-height: 21px;
    color: #ccc;
  }

  .kp-my /deep/ .kp-vheader .kp-vheader-left .left-arrow:before {
    display: none;
  }

  .kp-my /deep/ .kp-vheader .kp-vheader-right {
    right: 0px;
    height: 86px;
    top: 0;
    width: 200px;
    line-height: 86px;
    text-align: right;
    position: absolute;
    display: block;
    font-size: 14px;
    color: #ccc;
  }

  .kp-my /deep/ .kp-vheader .kp-vheader-right a {
    padding-right: 32px;
    margin: 0;
  }

  /* //景区 */
  .scenic-search {
    width: 464px;
    height: 68px;
    display: block;
    border: none;
    background: #F7F7F7 url(../../assets/search-1.png) no-repeat 30px 16px;
    background-size: 30px 31px;
    border-radius: 2px;
    margin-top: 9px;
    font-size: 30px;
    line-height: 68px;
    font-family: PingFangSC-Regular;
    padding-left: 90px;
    outline: none;
  }

  .scenic-search2 {
    width: 630px;
    height: 68px;
    display: block;
    border: none;
    background: #F7F7F7 url(../../assets/search-1.png) no-repeat 30px 16px;
    background-size: 30px 31px;
    border-radius: 2px;
    margin-top: 9px;
    font-size: 30px;
    line-height: 68px;
    font-family: PingFangSC-Regular;
    padding-left: 90px;
    outline: none;
  }

  .kp-my /deep/ .scenic.kp-vheader .kp-vheader-title {
    font-size: 34px;
    height: 86px;
    line-height: 86px;
    margin: 0 196px 0 90px;
  }

  .kp-my /deep/ .scenic.kp-vheader .kp-vheader-left {
    left: 0px;
    height: 86px;
    top: 0;
    width: 90px;
  }

  .kp-my /deep/ .scenicS.kp-vheader .kp-vheader-title {
    font-size: 34px;
    height: 86px;
    line-height: 86px;
    margin: 0 30px 0 90px;
  }

  .kp-my /deep/ .scenicS.kp-vheader .kp-vheader-left {
    left: 0px;
    height: 86px;
    top: 0;
    width: 90px;
  }

  .kp-my /deep/ .scenic .kp-vheader-left .left-arrow,
  .kp-my /deep/ .scontent.kp-vheader .kp-vheader-left .left-arrow {
    width: 30px;
    height: 50px;
    background: url(../../assets/left-4.png) no-repeat center center;
    background-size: 30px 50px;
    top: 18px;
    left: 20px;
  }

  .kp-my /deep/ .scenic.kp-vheader .kp-vheader-right {
    right: 0px;
    height: 86px;
    top: 0;
    width: 196px;
    line-height: 86px;
    text-align: right;
  }

  /* 酒店*/
  .kp-my /deep/ .scenic.kp-vheader .kp-vheader-title .hotel-title {
    position: relative;
  }

  .hotel-t-box {
    position: absolute;
    width: 127px;
    height: 68px;
    top: 0;
    left: 0;
    background: url(../../assets/bottom-5.png) no-repeat right center;
    background-size: 20px 10px;
  }

  .hotel-t-box em:nth-child(1) {
    margin-top: 9px;
  }

  .hotel-t-box em {
    font-size: 22px;
    color: rgb(68, 68, 68);
    display: block;
    text-align: left;
    line-height: 1.2;
    padding-left: 10px;
  }

  .hotel-search2 {
    width: 450px;
    height: 68px;
    display: block;
    border: none;
    background: #F7F7F7;
    border-radius: 2px;
    margin-top: 9px;
    font-size: 24px;
    line-height: 68px;
    font-family: PingFangSC-Regular;
    padding-left: 30px;
    outline: none;
  }

  /* //导航样式开始 */
  /***********************导航颜色*****************************/
  /* //导航 青色*/
  .kp-my /deep/ .cyan {
    background: rgb(59, 195, 194);
    z-index: 2;
  }

  .kp-my /deep/ .filmCoupon {
    background: #fff;
    z-index: 2;
  }

  /* //导航 透明*/
  .kp-my /deep/ .transparent {
    background: none;
  }

  /* //导航 白色*/
  .kp-my /deep/ .white {
    background: #fff;
  }

  /* //导航 白色带底线*/
  .kp-my /deep/ .white-border {
    background: #fff;
    border-bottom: 1px solid rgb(229, 229, 229);
  }

  .kp-my /deep/ .air-farepeo {
    background: #fff;
  }

  .kp-my /deep/ .insuran {
    background: #fff;
    border-bottom: 1px solid rgb(200, 200, 200);
  }

  .kp-my /deep/ .addpeo {
    background: rgb(59, 195, 194);
  }

  .kp-my /deep/ .train {
    background: none;
  }

  .kp-my /deep/ .aircft {
    background: #ff3d17;
    z-index: 99;
  }


  /* //导航 景区导航*/
  .kp-my /deep/ .scenic {
    background: #fff;
    z-index: 99;
  }

  /***********************导航字体颜色*****************************/
  /* //白色导航 字体颜色*/
  .kp-my /deep/ .white .kp-vheader-title {
    color: rgb(51, 51, 51);
  }

  .kp-my /deep/ .white-border .kp-vheader-title {
    color: rgb(51, 51, 51);
  }

  .kp-my /deep/ .air-farepeo .kp-vheader-title {
    color: rgb(51, 51, 51);
  }

  .kp-my /deep/ .insuran .kp-vheader-title {
    color: rgb(51, 51, 51);
  }

  .kp-my /deep/ .filmCoupon .kp-vheader-title {
    color: #333;
    font-size: 32px;
  }

  /***********************导航左部按钮*****************************/
  /* /导航左部返回按钮 透明导航返回*/
  .kp-my /deep/ .transparent .kp-vheader-left .left-arrow {
    width: 25px;
    height: 44px;
    background: url(../../assets/left-2.png) no-repeat center center;
    background-size: 25px 44px;
    top: 25px;
    left: 30px;
  }

  .kp-my /deep/ .aircft .kp-vheader-left .left-arrow {
    width: 25px;
    height: 44px;
    background: url(../../assets/left-3.png) no-repeat center center;
    background-size: 25px 44px;
    top: 25px;
    left: 30px;
  }

  .kp-my /deep/ .sign .kp-vheader-left .left-arrow {
    width: 25px;
    height: 44px;
    background: url(../../assets/left-3.png) no-repeat center center;
    background-size: 25px 44px;
    top: 25px;
    left: 30px;
  }

  .kp-my /deep/ .wallet .kp-vheader-left .left-arrow {
    width: 36px;
    height: 36px;
    background: url(../../assets/left-1.png) no-repeat center center;
    background-size: 36px;
    top: 25px;
    left: 30px;
  }

  .kp-my /deep/ .heise .kp-vheader-left .left-arrow {
    width: 36px;
    height: 36px;
    background: url(../../assets/fanhui.png) no-repeat center center;
    background-size: 36px;
    top: 25px;
    left: 30px;
  }

  .kp-my /deep/ .bank .kp-vheader-left .left-arrow {
    width: 36px;
    height: 36px;
    background: url(../../assets/fanhui.png) no-repeat center center;
    background-size: 36px;
    top: 25px;
    left: 30px;
  }

  /* /导航左部返回按钮 白色导航返回*/
  .kp-my /deep/ .white .kp-vheader-left .left-arrow {
    width: 25px;
    height: 44px;
    background: url(../../assets/left-4.png) no-repeat center center;
    background-size: 25px 44px;
    top: 25px;
    left: 30px;
  }

  .kp-my /deep/ .white-border .kp-vheader-left .left-arrow {
    width: 25px;
    height: 44px;
    background: url(../../assets/left-2.png) no-repeat center center;
    background-size: 25px 44px;
    top: 25px;
    left: 30px;
  }

  .kp-my /deep/ .air-farepeo .kp-vheader-left .left-arrow {
    width: 25px;
    height: 44px;
    background: url(../../assets/left-5.png) no-repeat center center;
    background-size: 25px 44px;
    top: 25px;
    left: 30px;
  }

  .kp-my /deep/ .insuran .kp-vheader-left .left-arrow {
    width: 25px;
    height: 44px;
    background: url(../../assets/left-4.png) no-repeat center center;
    background-size: 25px 44px;
    top: 25px;
    left: 30px;
  }

  .kp-my /deep/ .filmCoupon .kp-vheader-left .left-arrow {
    width: 25px;
    height: 44px;
    background: url(../../assets/left-2.png) no-repeat center center;
    background-size: 25px 44px;
    top: 25px;
    left: 30px;
  }

  /***********************导航右部按钮*****************************/
  .kp-my /deep/ .transparent .kp-vheader-right a.kp-right-set {
    font-size: 32px;
    color: rgb(59, 195, 194);
  }

  .kp-my /deep/ .transparent .kp-vheader-right a.kp-right-sign {
    font-size: 28px;
    color: #fff;
  }

  .kp-my /deep/ .scenic .kp-vheader-right a.kp-right-scenic {
    padding: 0 30px;
    font-size: 32px;
    color: #444444;
    float: left;
    background: url(../../assets/bottom-1.png) no-repeat right center;
    background-size: 24px 16px;
  }

  .kp-my /deep/ .white-border .kp-vheader-right a.kp-right-air {
    color: rgb(59, 195, 194);
    font-size: 30px;
    padding-right: 0;
    float: right;
    margin-right: 30px;
  }

  .kp-my /deep/ .scontent_add .kp-vheader-right a.kp-right-addpeo {
    color: rgb(51, 51, 51);
    font-size: 30px;
    padding-right: 0;
    float: right;
    margin-right: 19px;
    display: block;
    height: 86px;
  }

  .kp-vheader-right .kp-right-scenicOrderPay {
    color: #4c4848;
    font-size: 30px;
    padding-right: 0;
    float: right;
    margin-right: 19px;
  }

  .kp-my /deep/ .addpeo .kp-vheader-right a.kp-right-addpeo {
    color: #fff;
    font-size: 30px;
    padding-right: 0;
    float: right;
    margin-right: 19px;
  }

  /* 导航样式结束 */

</style>
